<template>
	<view class="cooper-shop">
		<NavBar title="合作商家" right="search" @rightTap="search" />
		<view class="tips"> 指定的合作商户，订单会优先在抢单大厅显示订单，终止合作后， 该商户的订单不会在指定订单中显示。 </view>
		<!-- 商家 item -->
		<view class="shop-list" v-if="shopList.length">
			<view class="shop-item" v-for="(item, index) in shopList" :key="item">
				<view class="jl-btn">
					<view class="jl"> 距我：{{item.distance}}M</view>
					<view class="btn" v-if="item.status==1" @tap="openModal(item.shop_id, index)"> 终止合作 </view>
					<view class="btn a-btn" v-if="item.status==2" @tap="yesCooper(item.shop_id, index)"> 确认合作 </view>
				</view>
				<view class="shop-info">
					<image :src="item.logo" class="shop-avatar" />
					<view class="info">
						<view class="shop-name">
							<text>{{item.name}}</text> 
							<Tag :text="item.type==1?'商家':'个人'" :bgc="item.type==1?'#FF3B1E':'#FF9B05'" /> 
						</view>
						<view class="shop-address"> 地址：{{item.detail_address}} </view>
					</view>
					<image src="/static/icon/rider/loca.png" class="shop-nav" @tap="openLocation(item.latitude, item.longitude, item.name)"/>
				</view>
			</view>
		</view>
		<Empty txt="暂无合作商家~" v-else />
		<Modal ref="modalRef" title="终止合作" textarea="请填写终止合作的理由" @confirm="stopCooper" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import Tag from'@/components/Tag.vue'
	import Modal from '@/components/Modal.vue';
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { useAddressStore } from '@/store/index.js'
	import { GetCooperShopListApi, YesShopApi, StopShopApi } from '@/service/rider.js'
	const modalRef = ref()
	const total = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const shopList = ref([])
	const searchVal = ref('')
	const search =  (val) => {
		searchVal.value = val
		page.value = 1
		shopList.value = []
		getCooperShopList()
	}
	const openModal = (shop_id, index) => {
		shopID.value = shop_id
		shopIndex.value = index
		modalRef.value.open()
	}
	// 确认合作
	const yesCooper = (shop_id, i) => {
		YesShopApi({shop_id}).then(res => {
			shopList.value[i].status = 1
		})
	}
	// 终止合作
	const shopID = ref()
	const shopIndex = ref()
	const stopCooper = (val) => {
		StopShopApi({shop_id:shopID.value, msg: val}).then(res => {
			shopList.value[shopIndex.value].status = 0
			modalRef.value.close()
		})
	}
	// 打开地图
	const openLocation = (latitude, longitude, name) => {
		uni.openLocation({
			latitude: Number(latitude),
			longitude: Number(longitude),
			name,
			success: (res) => {
				console.log(res);
			}
		})
	}
	const getCooperShopList = () => {
		const { lonlat } = useAddressStore()
		const params = {
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
			page: page.value,
			page_size: pageSize.value,
			filters: {
				search: searchVal.value
			}
		}
		GetCooperShopListApi(params).then(res => {
			shopList.value.push(...res.data)
			total.value = res.total
		})
	}
	onLoad(() => {
		const { SETLONLAT } = useAddressStore()
		SETLONLAT()
		getCooperShopList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getCooperShopList()
	})
</script>

<style lang="scss" scoped>
	.cooper-shop {
		.tips {
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 12px;
			color: #FF7D00;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			background: #FFF7E8;
			// line-height: 40px;
		}
		.shop-list {
			padding: 10px 15px;
			box-sizing: border-box;
			.shop-item {
				border-radius: 10px;
				background-color: #fff;
				padding: 13px 10px 10px;
				margin-bottom: 10px;
				.jl-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 12px;
					border-bottom: 1px solid #eeeeee;
					.jl {
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						line-height: 17px;
					}
					.btn {
						width: 68px;
						height: 22px;
						color: #333333;
						font-size: 12px;
						font-weight: 400;
						line-height: 22px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 151px;
						border: 1px solid #999999;
						&.a-btn {
							color: #FFFFFF;
							background: #FF3B1E;
							border: none;
						}
					}
				}
				.shop-info {
					display: flex;
					margin-top: 10px;
					align-items: center;
					.shop-avatar {
						width: 80px;
						height: 80px;
						border-radius: 10px;
					}
					.info {
						flex: 1;
						margin: 0 10px;
						min-height: 80px;
						.shop-name {
							display: flex;
							align-items: center;
							color: #333333;
							font-size: 16px;
							font-weight: 500;
							line-height: 19px;
							margin-bottom: 10px;
							text {
								margin-right: 5px;
							}
						}
						.shop-address {
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
						}
					}
					.shop-nav {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		.popup-content {
			width: 311px;
			border-radius: 10px;
			padding: 20px 10px 0;
			background-color: #FFFFFF;
			.title {
				color: #333333;
				font-size: 17px;
				font-weight: bold;
				line-height: 24px;
				text-align: center;
				margin-bottom: 4px;
			}
			.text {
				width: 100%;
				padding: 10px;
				color: #999999;
				border-radius: 5px;
				background: #EEEEEE;
				margin-bottom: 16px;
				box-sizing: border-box;
			}
			.btn-box {
				display: flex;
				border-top: 1px solid #EEEEEE;
				.btn {
					flex: 1;
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 44px;
					text-align: center;
					box-sizing: border-box;
					&.confirm {
						color: #FF3B1E;
						border-left: #EEEEEE 1px solid;
					}
				}
			}
		}
	}
</style>
